<template>
  <div class="order_list">
    <!-- 问诊订单列表=tab+列表组件 -->
    <!-- tab 无状态组件 -->
    <custom-tabs :data="orderTabs" @change="handleChange"></custom-tabs>

    <!-- 列表组件 -->
    <!-- v-show 是样式上的隐藏 => 没有性能消耗 -->
    <view v-for="(item, index) in orderTabs" :key="item.label" v-show="activeTab === index">
      <!-- v-if是会销毁重建组件的 => 将来切换tab 性能开销太大了 => 点了就改true(但是不改别人为false) -->
      <!-- 由于不销毁组件了  之前的组件结构还在 => v-show -->
      <order-list :type="index + 1" v-if="item.render"></order-list>
    </view>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const orderTabs = ref([
    // render => 表示当前这个组件是否渲染出来了
    { label: '问医生', render: true },
    { label: '极速问诊', render: false },
    { label: '开药问诊', render: false },
  ])

  const activeTab = ref(0)
  const handleChange = (index: number) => {
    console.log('被激活了', index)
    activeTab.value = index
    // 点了谁 对应的render  改true => 创建出来(不会销毁)
    orderTabs.value[index].render = true
  }
</script>

<style lang="scss" scoped></style>
